<template>
  <div class="center_concern_container">
    <div class="content" v-if="pagina.total">
      <Attention :author_concern="handlerList" type="concern"></Attention>
      <MyPagination :size="pagina.size" :total="pagina.total"></MyPagination>
    </div>
    <div class="empty" v-if="contentLength">😅空空如也...</div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //快速发送
import Attention from "../components/Attention";

export default {
  name: "CenterConcern",
  components: {
    Attention,
  },
  computed: {
    ...mapState("user", ["aimUserInfo"]),
    handlerList() {
      return this.author_concern;
    },
  },
  data() {
    return {
      // 分页器数据
      pagina: {
        total: 0,
        size: 6,
        current: 1,
      },
      // 关注列表
      author_concern: [],
      contentLength: false,
    };
  },
  watch: {
    aimUserInfo(val) {
      if (!val) return;
      this._init_concern();
    },
    author_concern: {
      immediate: true,
      handler(val) {
        if (val.length !== 0) return;
        this._init_concern();
      },
    },
  },
  methods: {
    async _init_concern() {
      // 没有数据时，先跳出执行
      if (!this.aimUserInfo.concern) {
        this.$parent.$parent.loadingResource = false;
        return (this.contentLength = true);
      }
      if (JSON.parse(this.aimUserInfo?.concern)?.content.length === 0) {
        this.$parent.$parent.loadingResource = false;
        return (this.contentLength = true);
      }
      if (this.author_concern.length) return;
      // 获取所有的用户数据
      let result = await this.$api.getAllUserInfo();

      // 我的关注的数据
      let myConcern = JSON.parse(this.aimUserInfo.concern).content;
      let num = this.author_concern.length;
      while (num != myConcern.length) {
        let arr = result.data.filter((item) => {
          if (item.user_id === myConcern[num]) {
            num++;
            return true;
          } else {
            return false;
          }
        });
        this.author_concern = [...this.author_concern, ...arr];
      }
      this.pagina.total = num;
    },
  },
  mounted() {
    this.$parent.active = 3;
    // this._init_concern();
  },
};
</script>

<style lang="less" scoped>
</style>